<html>
<head>
	<title>注册</title>
	<style>
		table{
			position:absolute ;
			left:35%;
			border:1px solid green;
		}
		h2{
			position:relative  ;
			left:45%;
		}
		.input1{
			width:350px;
		}
		.td1{
			text-align :right;

		}
	</style>


</head>

<body>
<h2>苏城购物-注册</h2>
<hr>
<form id="form" >
	<table  width="650px" >

		<tr><td class="td1">籍贯</td><td>&nbsp;
			省份：
			<!--this:当前对象（select对象）-->
			<select name="province" id="province" onchange="selectCity(this);">
				<option value="-1">-请选择-</option>

			</select>&nbsp;
			城市：
			<select name="city" id="city">
				<option value="-1">-请选择-</option>
			</select>
		</td></tr>


		<tr><td  colspan="2" align="center"><input  type="submit" value="注册" onclick="return viliForm();"/><!--<input  type="button" value="注册" onclick="viliForm();"/>-->&nbsp;&nbsp;<input  type="reset" value="重置"/></td></tr>

	</table>



</form>
</body>


</html>
<script>
	var province = document.getElementById("province");
	var city = document.getElementById("city");
	/*
	*初始化的数据 我们这里模拟数据 直接手写，项目中可能数据库查  或者是xml文件把数据库保存
	*/
	var provinces = [{id:'jiangsu',name:'江苏',citys:[{id:'nanjing',name:'南京'},{id:'suzhou',name:'苏州'},{id:'wuxi',name:'无锡'}]},
		{id:'henam',name:'河南',citys:[{id:'zhengzhou',name:'郑州'},{id:'luoyang',name:'洛阳'},{id:'zhumadian',name:'驻马店'}]},
		{id:'anhui',name:'安徽',citys:[{id:'hefei',name:'合肥'},{id:'wuhu',name:'芜湖'},{id:'bengbu',name:'蚌埠'}]}];

	function init(){
		var str='';
		for(var i= 0;i<provinces.length;i++){
			str+='<option value='+provinces[i].id+'>'+provinces[i].name+'</option>';
		}
		province.innerHTML+=str;
	}
	function selectCity(obj){
		city.innerHTML ='</optoin value="-1">---请选择</option>';
		for(var i = 0;i<provinces.length;i++){
			if(obj.value==provinces[i].id){
				var citys = provinces[i].citys;
				var str='';
				for(var j=0;j<citys.length;j++){
					str+='<option value='+citys[j].id+'>'+citys[j].name+'</option>';
				}
				city.innerHTML+=str;
			}
		}

	}
</script>
<script>
	init();
	selectCity(province);
</script>